<template>
  <div class="mentors">
    <div class="title">Mentors</div>
    <div class="list">
      <div v-for="(item, index) in mentorList" :key="index" class="item">
        <img :src="item.img" alt="" class="img">
        <div class="name">{{ item.name }}</div>
        <pre class="job">{{ item.job }}</pre>
      </div>
    </div>
    <img src="@/assets/images/pc_mentors_corner1.png" alt="" class="mentors-corner1">
    <img src="@/assets/images/pc_mentors_corner2.png" alt="" class="mentors-corner2">
  </div>
</template>

<script setup>
import { ref } from 'vue'
import avatar1 from '@/assets/images/avatar1.png'
import avatar2 from '@/assets/images/avatar2.png'
import avatar3 from '@/assets/images/avatar3.png'
import avatar4 from '@/assets/images/avatar4.png'
import avatar5 from '@/assets/images/avatar5.png'
import avatar6 from '@/assets/images/avatar6.png'
import avatar7 from '@/assets/images/avatar7.png'
import avatar8 from '@/assets/images/avatar8.png'
import avatar9 from '@/assets/images/avatar9.png'
import avatar10 from '@/assets/images/avatar10.png'
import avatar11 from '@/assets/images/avatar11.png'
import avatar12 from '@/assets/images/avatar12.png'
import avatar13 from '@/assets/images/avatar13.png'
import avatar14 from '@/assets/images/avatar14.png'
import avatar15 from '@/assets/images/avatar15.png'
import avatar16 from '@/assets/images/avatar16.png'
import avatar17 from '@/assets/images/avatar17.png'
import avatar18 from '@/assets/images/avatar18.png'

const mentorList = ref([
  {
    img: avatar1,
    name: 'Yawn Rong',
    job: `Co-founder
FindSatoshi Lab`
  }, {
    img: avatar2,
    name: 'Gabby Dizon',
    job: `Co-founder
YGG`
  }, {
    img: avatar3,
    name: 'Thanh Le',
    job: `Founder
Coin98`
  }, {
    img: avatar4,
    name: 'Ciara Sun',
    job: `Founder and 
Managing Partner
C² Ventures`
  }, {
    img: avatar5,
    name: 'Bryan Pellegrino',
    job: `Co-founder and 
CEO
LayerZero Labs`
  }, {
    img: avatar6,
    name: 'Audrey Yang',
    job: `Chief Growth Officer
 Orderly Network`
  }, {
    img: avatar7,
    name: 'Felix Xu',
    job: `Co-founder
Arpa Network`
  }, {
    img: avatar8,
    name: 'Jason Brink',
    job: `Chief Blockchain 
Officer
Gala Games`
  }, {
    img: avatar9,
    name: 'Gabby Dizon',
    job: `Chief Commercial 
Officer
OKX`
  }, {
    img: avatar10,
    name: 'Jenny Cheng',
    job: `VP
 Animoca Ventures`
  }, {
    img: avatar11,
    name: 'Moshe Shen',
    job: `Director of BD and 
Partnerships
Wintermute`
  }, {
    img: avatar12,
    name: 'GM',
    job: `Co-founder
YGG`
  }, {
    img: avatar13,
    name: 'HC Xie',
    job: `Aisa Head
Aptos Labs`
  }, {
    img: avatar14,
    name: 'Alexi Solit',
    job: `Managing Partner
Metamatic`
  }, {
    img: avatar15,
    name: 'Alex Mukhin',
    job: `Co-Founder and 
Managing Partner
Cryptomeria Capital`
  }, {
    img: avatar16,
    name: 'Shreyansh Singh',
    job: `Head
Polygon Studio`
  }, {
    img: avatar17,
    name: 'Augustus Ilag',
    job: `Investment Partner, 
Head of Asia 
CMT Digital`
  }, {
    img: avatar18,
    name: 'AJ Labella',
    job: `nvestment Team 
C² Ventures`
  }
])
</script>

<style lang="scss" scoped>
  .mentors{
    text-align: center;
    position: relative;
    .title{
      margin-top: 162px;
      color: #5CD848;
      font-size: 90px;
      line-height: 108px;
      font-family: poppins-bold;
    }
    .list{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;
      .item{
        width: 16.6666666%;
        margin-top: 50px;
        .img{
          width: 150px;
          height: 150px;
          border-radius: 50%;
          overflow: hidden;
        }
        .name{
          margin-top: 16px;
          font-size: 22px;
          line-height: 29px;
          color: #fff;
        }
        .job{
          margin-top: 16px;
          font-size: 16px;
          line-height: 19px;
          color: #d5d5d5;
          font-family: poppins-light;
          height: 60px;
        }
      }
    }
    .mentors-corner1{
      position: absolute;
      right: -250px;
      top: 0;
    }
    .mentors-corner2{
      position: absolute;
      left: -250px;
      bottom: 0;
    }
  }
  @media screen and (max-width: 1180px) {
    .mentors{
      padding-bottom: 54px;
      margin-left: -15px;
      margin-right: -15px;
      .title{
        margin-top: 70px;
        font-size: 32px;
        line-height: 38px;
      }
      .list{
        margin-top: 17px;
        .item{
          width: 33.3333333%;
          margin-top: 20px;
          .img{
            width: 80px;
            height: 80px;
          }
          .name{
            margin-top: 6px;
            font-size: 13px;
            line-height: 16px;
          }
          .job{
            margin-top: 7px;
            font-size: 11px;
            line-height: 13px;
            height: 40px;
          }
        }
      }
      .mentors-corner1{
        position: absolute;
        right: 5px;
        top: 0;
        width: 54px;
        height: 54px;
      }
      .mentors-corner2{
        position: absolute;
        left: 5px;
        bottom: 0;
        width: 54px;
        height: 54px;
      }
    }
  }
</style>